import React, { useEffect, useRef, useState } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';
import { AMAP_CONFIG, DEFAULT_COORDINATES, MAP_ENABLED } from '../config/amap';
import StaticMapComponent from './StaticMapComponent';
import './MapComponent.css';

const MapComponent = ({ longitude, latitude, address, companyName }) => {
  const mapRef = useRef(null);
  const mapInstance = useRef(null);
  const markerInstance = useRef(null);
  const [mapLoading, setMapLoading] = useState(true);
  const [mapError, setMapError] = useState(false);

  useEffect(() => {
    // 如果地图功能未启用，直接设置错误状态
    if (!MAP_ENABLED) {
      setMapError(true);
      setMapLoading(false);
      return;
    }
    const initMap = async () => {
      try {
        setMapLoading(true);
        setMapError(false);

        // 检查API Key是否配置
        if (AMAP_CONFIG.key === 'your-amap-api-key-here') {
          console.error('高德地图API Key未配置！');
          setMapError(true);
          setMapLoading(false);
          return;
        }

        // 检查API Key格式
        if (!AMAP_CONFIG.key || AMAP_CONFIG.key.length < 20) {
          console.error('API Key格式不正确！');
          setMapError(true);
          setMapLoading(false);
          return;
        }

        // 使用传入的经纬度或默认坐标
        const finalLongitude = longitude && longitude !== '' ? longitude : DEFAULT_COORDINATES.longitude;
        const finalLatitude = latitude && latitude !== '' ? latitude : DEFAULT_COORDINATES.latitude;


        // 加载高德地图API
        const AMap = await AMapLoader.load(AMAP_CONFIG);

        // 创建地图实例
        mapInstance.current = new AMap.Map(mapRef.current, {
          zoom: 15,
          center: [parseFloat(finalLongitude), parseFloat(finalLatitude)],
          mapStyle: 'amap://styles/normal'
        });

        // 添加比例尺控件
        mapInstance.current.addControl(new AMap.Scale());

        // 添加工具栏控件
        mapInstance.current.addControl(new AMap.ToolBar());

        // 创建标记点
        markerInstance.current = new AMap.Marker({
          position: [parseFloat(finalLongitude), parseFloat(finalLatitude)],
          title: companyName || '公司位置',
          content: `
            <div class="custom-marker">
              <div class="marker-icon">📍</div>
              <div class="marker-text">${companyName || '公司位置'}</div>
            </div>
          `
        });

        // 将标记添加到地图
        mapInstance.current.add(markerInstance.current);

        // 创建信息窗体
        const infoWindow = new AMap.InfoWindow({
          content: `
            <div class="info-window">
              <h4>${companyName || '公司位置'}</h4>
              <p>${address || '地址信息'}</p>
              <p>坐标: ${finalLongitude}, ${finalLatitude}</p>
            </div>
          `,
          offset: new AMap.Pixel(0, -30)
        });

        // 点击标记显示信息窗体
        markerInstance.current.on('click', () => {
          infoWindow.open(mapInstance.current, markerInstance.current.getPosition());
        });

        setMapLoading(false);
      } catch (error) {
        console.error('地图初始化失败:', error);
        console.error('错误类型:', error.name);
        console.error('错误消息:', error.message);
        
        // 检查是否是API Key相关错误
        if (error.message && error.message.includes('Unimplemented type')) {
          console.error('API Key权限问题，请检查：');
          console.error('1. API Key是否为Web端JS API类型');
          console.error('2. 是否启用了Web端JS API服务');
          console.error('3. 域名是否在白名单中');
          console.error('4. API Key是否超出调用限制');
        }
        
        setMapError(true);
        setMapLoading(false);
      }
    };

    initMap();

    // 清理函数
    return () => {
      if (mapInstance.current) {
        mapInstance.current.destroy();
        mapInstance.current = null;
      }
    };
  }, [longitude, latitude, address, companyName]);

  // 如果地图功能未启用，返回静态地图组件
  if (!MAP_ENABLED) {
    return (
      <StaticMapComponent 
        longitude={longitude}
        latitude={latitude}
        address={address}
        companyName={companyName}
      />
    );
  }

  if (mapError) {
    return (
      <div className="map-error">
        <div className="map-error-icon">🗺️</div>
        <p>地图加载失败</p>
        <p className="map-error-address">{address || '北京通州区金融街武夷融御4号楼901'}</p>
        <p className="map-error-tip">
          {AMAP_CONFIG.key === 'your-amap-api-key-here' 
            ? '请配置高德地图API Key' 
            : 'API Key配置问题，请检查权限设置'
          }
        </p>
        {AMAP_CONFIG.key === 'your-amap-api-key-here' ? (
          <div className="api-key-help">
            <p>配置步骤：</p>
            <ol>
              <li>访问 <a href="https://lbs.amap.com/api/javascript-api/guide/abc/prepare" target="_blank" rel="noopener noreferrer">高德开放平台</a></li>
              <li>申请Web端JS API的API Key</li>
              <li>在 src/config/amap.js 中替换API Key</li>
            </ol>
          </div>
        ) : (
          <div className="api-key-help">
            <p>API Key权限问题排查：</p>
            <ol>
              <li>确认API Key类型为"Web端(JS API)"</li>
              <li>检查是否启用了Web端JS API服务</li>
              <li>确认域名已添加到白名单（localhost、127.0.0.1等）</li>
              <li>检查API Key是否超出调用次数限制</li>
              <li>确认API Key没有过期</li>
            </ol>
            <p className="api-key-current">当前API Key: {AMAP_CONFIG.key.substring(0, 8)}...</p>
          </div>
        )}
      </div>
    );
  }

  return (
    <div className="map-container">
      {mapLoading && (
        <div className="map-loading">
          <div className="loading-spinner"></div>
          <p>地图加载中...</p>
        </div>
      )}
      <div 
        ref={mapRef} 
        className="map-content"
        style={{ display: mapLoading ? 'none' : 'block' }}
      />
    </div>
  );
};

export default MapComponent;
